import {Form, useActionData} from 'react-router-dom'
import {useSelector} from 'react-redux'

export default function EditUser() {
    const currentUser = useSelector(state => state.user)
    const {username, avatar, bio} = currentUser;
    const updata = useActionData() //form表单校验
    return (
        <>
            {updata && updata.status && <span style={{color: "red"}}>{updata.message}</span>}
            <Form method="put">
                <fieldset className="form-group">
                    <input
                        className="form-control form-control-lg"
                        type="text"
                        placeholder="用户头像"
                        name="avatar"
                        defaultValue={avatar || "https://ww1.sinaimg.cn/mw690/9516662fgy1hct88xfrd9j20k00k0dho.jpg"}
                    />
                </fieldset>
                <fieldset className="form-group">
                    <input
                        className="form-control form-control-lg"
                        type="text"
                        placeholder="用户名称"
                        defaultValue={username || ""}
                        name="username"
                    />{updata?.username && <span style={{color: "red"}}>{updata.username}</span>}
                </fieldset>
                <fieldset className="form-group">
                    <input
                        className="form-control form-control-lg"
                        type="password"
                        placeholder="用户密码"
                        name="password"
                    />{updata?.password && <span style={{color: "red"}}>{updata.password}</span>}
                </fieldset>
                <fieldset className="form-group">
                <textarea
                    className="form-control form-control-lg"
                    rows="8"
                    style={{resize: "none"}}
                    placeholder="用户简介"
                    defaultValue={bio || ""}
                    name="bio"
                />
                </fieldset>
                <button className="btn btn-lg btn-primary pull-xs-left" type="submit">更新</button>
            </Form>

        </>
    )

}